<template>
    <div class="index-zyfz">
        <div class="zyfz-box">
            <nuxt-link to="/viponly" class="left">
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyfz1.jpg" alt="" @click="go('/school/vipzjkc')">
            </nuxt-link>
            <div class="center">
                <div class="center-top">
                    <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyfz2.png" alt="" @click="go('/school/vipzjkc')">
                </div>
                <div class="center-bottom">
                    <div class="center-bottom-item">
                        <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyfz3.png" alt="" @click="go('/school/vipzjkc')">
                    </div>
                    <div class="center-bottom-item">
                        <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyfz4.png" alt="" @click="go('')">
                    </div>
                </div>
            </div>
            <div class="right">
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/zyfz5.png" alt="" @click="go('/school/vipzjkc')">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    async asyncData({ params }) {
        let data = {};
        return data;
    },
    layout: "home",
    head() {
        return {
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    components: {},
    data() {
        return {};
    },
    beforeMount() {},
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
        go(path) {
            if (!path) {
                this.$alert("敬请期待", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }
            this.$router.push({
                path: path,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.zyfz-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 42px 0;
    a{
        display: block;
    }
    img{
        width: 100%;
        height: auto;
        // object-fit: cover;
    }
    .left,
    .right {
        width: 20.5vw;
        height: 39.7vw;
        background: #d8d8d8;
    }
    .center{
        margin: 0 0.7vw;
        width: 42.6vw;
        .center-top{
            width: 100%;
            // height: 21.1vw;
            background: #d8d8d8;
            margin-bottom: 0.6vw;
        }
        .center-bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            // height: 17.8vw;
            .center-bottom-item{
                height: 100%;
                width: 20.8vw;
                background: #d8d8d8;
            }
        }
    }
}
</style>